<template>
    <div class="my-page">
        <van-nav-bar @click-left="onClickLeft" fixed style="background-color: #EB2023;">
            <template #title>
                <span style="color: white;font-size:16px;">申请记录</span>
            </template>
            <template #left>
                <van-icon name="arrow-left" color="#fff" />
                <span style="color: white;font-size:14px;">返回</span>
            </template>
        </van-nav-bar>
        <div style="margin-top:55px;height:auto;">
            <div v-for="(item, index) in list" :key="index">
                <div style="display: flex; align-items: center;background-color:#fff;margin-top:10px;">
                    <img :src="item.image1" alt="产品图片" style="margin-left:10px;width:100px;height:100px;">
                    <div style="margin-left: 10px;font-size:15px;">
                        <div style="font-size:16px;font-weight:bold;">{{ item.productName }}</div>
                        <div style="margin-top:20px;color:#b1b1b1;">申请时间：{{ item.createTime }}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
import { queryAppalySampleList } from '@/api/api.js';
export default {
    data() {
        return {
            loading: false,
            finished: false,
            list: [

            ],
            openid: '',
            pageNum: 1,
            pageSize: 10
        };
    },
    created() {
        // 初始化时加载留言咨询列表
        let openid = this.$route.query.openid;
        this.openid = openid;
    },
    mounted() {
        this.queryAppalySampleList();
        // 可以在这里添加初始化逻辑
        window.addEventListener('scroll', this.handleScroll);
    },

    beforeDestroy() {
        // 移除滚动事件监听，防止内存泄漏
        window.removeEventListener('scroll', this.handleScroll);
    },
    methods: {
        onClickLeft() {
            this.$router.go(-1);
        },
        handleScroll() {
            let that = this
            console.log(that.pageNum)
            debugger
            const { scrollTop, scrollHeight, clientHeight } = document.documentElement;
            if (scrollTop + clientHeight >= scrollHeight - 5) {
                that.pageNum = that.pageNum + 1;
                that.queryAppalySampleList()
            }
        },
        queryAppalySampleList() {
            let param = {
                openid: this.openid,
                pageNum: this.pageNum,
                pageSize: this.pageSize
            }
            // 调用查询留言咨询列表的接口
            queryAppalySampleList(param).then(response => {
                if (response.code == 200) {
                    this.list = response.rows;
                } else {
                    // 处理查询失败的情况
                    console.error('查询留言咨询列表失败:', response.message);
                }

            })
        }
    },

};
</script>

<style scoped>
.my-page {
    background-color: #F7F9FD;
    height: calc(100vh);
    /* 减去顶部导航栏的高度 */
    overflow-y: auto;
    /* 允许内容滚动 */
}

ul {
    list-style-type: none;
    padding: 0;
}

li {
    margin-bottom: 10px;
}

img {
    width: 50px;
    height: 50px;
    object-fit: cover;
}
</style>
